<template>
  <div class="topnav" ref="nav">
    <el-menu
      default-active="/shouye/lbsy"
      class="el-menu-demo"
      :default-openeds="['/shouye/lbsy']"
      :class="{noLight:topTheme.includes('2e3c56'),itemLight:!topTheme.includes('2e3c56')}"
      mode="horizontal"
      :background-color="theme.includes('linear') || topTheme.includes('#2e3c56')?'transparent':''"
      :text-color="!topTheme.includes('2e3c56')?'rgba(75, 104, 139, 1)':'#a8b8cd'"
      @select="handleSelect"
      :active-text-color="!topTheme.includes('2e3c56')?'#409eff':'#fff'"
      :ellipsis="false"
    >
    <!-- <el-menu-item  v-if="!item?.children" v-for="(item, index) in topMenus" :key="item"  :index="item.path" >
      <template #title>
          <div class="item">
            <img src="@/assets/icons/svg/联动平台L.svg" alt="" v-if="item.meta.title.includes('实时异常')">
            <img src="@/assets/icons/svg/控制L.svg" alt="" v-if="item.meta.title.includes('控制')">
            <span v-if="item.meta.title.includes('实时异常') || item.meta.title.includes('控制')">
              {{ item.meta.title }}
            </span>
          </div>
        </template>
    </el-menu-item> -->
      <el-sub-menu  v-for="(item, index) in topMenus" :key="index" :index="item.path">
        <template #title>
          <div class="item">
            <img src="@/assets/icons/svg/首页L.svg" alt="" v-if="item.meta.title.includes('首页')">
            <img src="@/assets/icons/svg/参数设置L.svg" alt="" v-if="item.meta.title.includes('基础配置')">
            <img src="@/assets/icons/svg/报表L.svg" alt="" v-if="item.meta.title.includes('历史数据')">
            <img src="@/assets/icons/svg/列表L.svg" alt="" v-if="item.meta.title.includes('历史设备')">

            <img src="@/assets/icons/svg/联动平台L.svg" alt="" v-if="item.meta.title.includes('实时异常')">
            <img src="@/assets/icons/svg/控制L.svg" alt="" v-if="item.meta.title.includes('控制')">

            <img src="@/assets/icons/svg/页面编辑L.svg" alt="" v-if="item.meta.title.includes('页面编辑')">
            <img src="@/assets/icons/svg/曲线L.svg" alt="" v-if="item.meta.title.includes('曲线')">
            <img src="@/assets/icons/svg/柱_状图L.svg" alt="" v-if="item.meta.title.includes('状态图')">
            <img src="@/assets/icons/svg/模拟图L.svg" alt="" v-if="item.meta.title.includes('模拟图')">
            <img src="@/assets/icons/svg/查询L.svg" alt="" v-if="item.meta.title.includes('查询')">
            <img src="@/assets/icons/svg/瓦斯抽放L.svg" alt="" v-if="item.meta.title.includes('瓦斯抽放')">
            <img src="@/assets/icons/svg/抽采评价L.svg" alt="" v-if="item.meta.title.includes('抽采')">
            <img src="@/assets/icons/svg/工具L.svg" alt="" v-if="item.meta.title.includes('工具')">
            <img src="@/assets/icons/svg/系统配置L.svg" alt="" v-if="item.meta.title.includes('系统管理')">
            <!-- <home-img v-if="item.meta.title.includes('首页')"/> -->
            <!-- <canshu-img v-if="item.meta.title.includes('参数配置')"/>
            <kongzhi-img v-if="item.meta.title.includes('控制')"/>
            <bianji-img v-if="item.meta.title.includes('页面编辑')"/>
            <list-img v-if="item.meta.title.includes('列表')"/>
            <quxian-img v-if="item.meta.title.includes('曲线')"/>
            <zhuzhuangtu-img v-if="item.meta.title.includes('状态图')"/> -->
            <!-- <monitu-img v-if="item.meta.title.includes('模拟图')"/>
            <baobiao-img v-if="item.meta.title.includes('报表')"/>
            <search-img v-if="item.meta.title.includes('查询')"/>
            <wasi-img v-if="item.meta.title.includes('瓦斯抽放')"/>
            <choucai-img v-if="item.meta.title.includes('抽采')"/> -->
            <!-- <gongju-img v-if="item.meta.title.includes('工具')"/>
            <liandong-img v-if="item.meta.title.includes('联动平台')"/>
            <system-img v-if="item.meta.title.includes('系统管理')"/> -->
            <div v-if="item.meta.title.includes('列表')" :class="{textcolor:topTheme.includes('linear')}">列表</div>
            <div v-else-if="item.meta.title.includes('状态图')" :class="{textcolor:topTheme.includes('linear')}">状态图</div>
            <div v-else-if="item.meta.title.includes('模拟图')" :class="{textcolor:topTheme.includes('linear')}">模拟图</div>
            <div v-else-if="item.meta.title.includes('查询')" :class="{textcolor:topTheme.includes('linear')}">查询</div>
            <div v-else :class="{textcolor:topTheme.includes('linear')}">{{item.meta.title}}</div>
          </div>
        </template>

        <el-menu-item v-if="!item.children" :index="item.path" >
          <template #title>{{item.meta.title}}</template>
        </el-menu-item>

        <el-menu-item :index="item2.path.includes(item.path)?item2.path:item.path + '/' + item2.path" v-for="item2 in filterFn1(item.children)" :key="item2">
          <template #title>{{item2.meta.title}}</template>
        </el-menu-item>
        <el-sub-menu :index="item2.path.includes(item.path)?item2.path:item.path + '/' + item2.path" v-for="item2 in filterFn2(item.children)" :key="item2">
          <template #title>{{item2.meta.title}}</template>
          <el-menu-item :index="item2.path.includes(item.path)?item2.path + '/' + item3.path:item.path + '/' + item2.path + '/' + item3.path" v-for="item3 in filterFn1(item2.children)" :key="item3">
            <template #title>{{item3.meta.title}}</template>
          </el-menu-item>
          <el-sub-menu  :index="item2.path.includes(item.path)?item2.path + '/' + item3.path:item.path + '/' + item2.path + '/' + item3.path" v-for="item3 in filterFn2(item2.children)" :key="item3">
            <template #title>{{item3.meta.title}}</template>
            <el-menu-item :index="item2.path.includes(item.path)?item2.path + '/' + item3.path + '/' + item4.path:item.path + '/' + item2.path + '/' + item3.path + '/' + item4.path" v-for="item4 in filterFn1(item3.children)" :key="item4">
              <template #title>{{item4.meta.title}}</template>
            </el-menu-item>
            <el-sub-menu :index="item2.path.includes(item.path)?item2.path + '/' + item3.path + '/' + item4.path:item.path + '/' + item2.path + '/' + item3.path + '/' + item4.path" v-for="item4 in filterFn2(item3.children)" :key="item4">
              <template #title>{{item4.meta.title}}</template>
              <el-menu-item :index="item2.path.includes(item.path)?item2.path + '/' + item3.path + '/' + item4.path + '/' + item5.path:item.path + '/' + item2.path + '/' + item3.path + '/' + item4.path + '/' + item5.path" v-for="item5 in filterFn1(item4.children)" :key="item5">
                <template #title>{{item5.meta.title}}</template>
              </el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-sub-menu>
      </el-sub-menu>
    </el-menu>
  </div>
    <div class="arrow" v-if="screenWidth < 1920">
      <el-icon @click="prev"><CaretLeft /></el-icon>
      <el-icon @click="next"><CaretRight /></el-icon>
    </div>
</template>

<script setup>
import homeImg from '@/components/homeImg'
import canshuImg from '@/components/canshuImg'
import kongzhiImg from '@/components/kongzhiImg'
import bianjiImg from '@/components/bianjiImg'
import listImg from '@/components/listImg'
import quxianImg from '@/components/quxianImg'
import zhuzhuangtuImg from '@/components/zhuzhuangtuImg'
import monituImg from '@/components/monituImg'
import baobiaoImg from '@/components/baobiaoImg'
import searchImg from '@/components/searchImg'
import wasiImg from '@/components/wasiImg'
import choucaiImg from '@/components/choucaiImg'
import gongjuImg from '@/components/gongjuImg'
import liandongImg from '@/components/liandongImg'
import systemImg from '@/components/systemImg'

import { constantRoutes } from "@/router"
import { isHttp } from '@/utils/validate'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
import { useRouter } from "vue-router";
import { watch } from "vue"

// 获取当前屏幕的宽度
const screenWidth = ref(window.innerWidth);

// 输出当前屏幕宽度
// console.log("当前屏幕宽度：" + screenWidth + "px");

// 顶部栏初始数
const visibleNumber = ref(null);
// 当前激活菜单的 index
const currentIndex = ref(null);
// 隐藏侧边栏路由
const hideList = ['/index', '/user/profile'];

const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const route = useRoute();
const router = useRouter();
let nav = ref()
// 主题颜色
const theme = computed(() => settingsStore.theme);
const path = computed(() => settingsStore.path);
const isShow = computed(() => settingsStore.isShow);
const topTheme = computed(() => settingsStore.topTheme);
// 所有的路由信息
const routers = computed(() => permissionStore.topbarRouters);
// 顶部显示菜单
const topMenus = computed(() => {
  let topMenus = [];
  routers.value.map((menu) => {
    if (menu.hidden !== true) {
      // 兼容顶部栏一级菜单内部跳转
      if (menu.path === "/") {
          topMenus.push(menu.children[0]);
      } else {
          topMenus.push(menu);
      }
    }
  })
  console.log(topMenus,'topMenus');
  return topMenus;
})

// 设置子路由
const childrenMenus = computed(() => {
  let childrenMenus = [];
  routers.value.map((router) => {
    for (let item in router.children) {
      if (router.children[item].parentPath === undefined) {
        if(router.path === "/") {
          router.children[item].path = "/" + router.children[item].path;
        } else {
          if(!isHttp(router.children[item].path)) {
            router.children[item].path = router.path + "/" + router.children[item].path;
          }
        }
        router.children[item].parentPath = router.path;
      }
      childrenMenus.push(router.children[item]);
    }
  })
  return constantRoutes.concat(childrenMenus);
})

// 默认激活的菜单
const activeMenu = computed(() => {
  const path = route.path;
  let activePath = path;
  if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
    const tmpPath = path.substring(1, path.length);
    activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
    if (!route.meta.link) {
        appStore.toggleSideBarHide(false);
    }
  } else if(!route.children) {
    activePath = path;
    appStore.toggleSideBarHide(true);
  }
  activeRoutes(activePath);
  return activePath;
})

function setVisibleNumber() {
  const width = document.body.getBoundingClientRect().width / 3;
  visibleNumber.value = parseInt(width / 85);
}

function handleSelect(key, keyPath) {
  console.log(keyPath,'keyPath');
  
  currentIndex.value = key;
   if(keyPath[0].includes('cspz')){
    document.querySelector(':root').style.setProperty('--base-width','calc(100% - 280px)');
    settingsStore.isShow = true
    settingsStore.routerName = 'cspz'
    let treeSet = {"isShow": isShow.value,"routerName":settingsStore.routerName};
    localStorage.setItem("tree-set", JSON.stringify(treeSet));
    // settingsStore.path = ''
  }else if(keyPath[0].includes('lbss')){
    document.querySelector(':root').style.setProperty('--base-width','calc(100% - 280px)');
    settingsStore.isShow = true
    settingsStore.routerName = 'lbss'
    // settingsStore.path = ''
  }else if(keyPath[0].includes('cxls')){
    document.querySelector(':root').style.setProperty('--base-width','calc(100% - 280px)');
    settingsStore.isShow = true
    settingsStore.routerName = 'cxls'
    // settingsStore.path = ''
  }else if(keyPath[0].includes('wscf')){
    document.querySelector(':root').style.setProperty('--base-width','calc(100% - 280px)');
    settingsStore.isShow = true
    settingsStore.routerName = 'wscf'
    // settingsStore.path = ''
  }else if(keyPath[0].includes('gj')){
    document.querySelector(':root').style.setProperty('--base-width','calc(100% - 280px)');
    settingsStore.isShow = true
    settingsStore.routerName = 'gj'
    // settingsStore.path = ''
  }else{
    localStorage.removeItem("tree-set")
    settingsStore.isShow = false
  }
  const route = routers.value.find(item => item.path === key);
  if (isHttp(key)) {
    // http(s):// 路径新窗口打开
    window.open(key, "_blank");
  } else if (!route || !route.children) {
    // 没有子路由路径内部打开
    const routeMenu = childrenMenus.value.find(item => item.path === key);
    if (routeMenu && routeMenu.query) {
      let query = JSON.parse(routeMenu.query);
      router.push({ path: key, query: query });
    } else {
      router.push({ path: key });
    }
    appStore.toggleSideBarHide(true);
  } else {
    // 显示左侧联动菜单
    activeRoutes(key);
    appStore.toggleSideBarHide(false);
  }
}

function activeRoutes(key) {
  let routes = [];
  if (childrenMenus.value && childrenMenus.value.length > 0) {
    childrenMenus.value.map((item) => {
      if (key == item.parentPath || (key == "index" && "" == item.path)) {
        routes.push(item);
      }
    });
  }
  if(routes.length > 0) {
    permissionStore.setSidebarRouters(routes);
  } else {
    appStore.toggleSideBarHide(true);
  }
  return routes;
}

// 筛选函数
const filterFn1 = (arr) => {
  let arr1 = []
  if(arr){
    arr.forEach(item => {
      if(!item.children){
        arr1.push(item)
      }
    });
    //  console.log(arr1,'arr1');
    return arr1
  }
}
// 筛选函数
const filterFn2 = (arr) => {
  let arr1 = []
  if(arr){
    arr.forEach(item => {
      if(item.children){
        arr1.push(item)
      }
    });
    // console.log(arr1,'arr2');
    return arr1
  }
}

let count = 1 
// 点击箭头移动导航
const next = () =>{
  let menu = document.querySelector('.el-menu-demo')
  let num = ((1200 - nav.value.offsetWidth) / 80).toFixed(0)
  if(count <= num){
    count++
  }
  console.log(menu.style.transform);
  menu.style.transform = `translateX(-${count*80}px)`
  console.log(num,count);
  console.log(menu.style.transform);
}
// 点击箭头移动导航
const prev = () =>{
  let menu = document.querySelector('.el-menu-demo')
  if(menu.style.transform != ''){
    let num = ((1200 - nav.value.offsetWidth) / 80).toFixed(0)
    if(count >=1){
      count--
    }
    menu.style.transform = `translateX(-${count*80}px)`
    console.log(num,count);
  }
}



// 点击顶部导航
const index = ref(0)
const cliclNav = (n) => {
  // index.value = n
  settingsStore.routerName = ''
  document.querySelector(':root').style.setProperty('--base-width','calc(100% - 280px)');
  settingsStore.isShow = true
  // settingsStore.path = ''
  if(n.path.includes('cspz')){
    document.querySelector(':root').style.setProperty('--base-width','calc(100% - 280px)');
    settingsStore.isShow = true
    settingsStore.routerName = 'cspz'
    // settingsStore.path = ''
  }else if(n.path.includes('lbss')){
    document.querySelector(':root').style.setProperty('--base-width','calc(100% - 280px)');
    settingsStore.isShow = true
    settingsStore.routerName = 'lbss'
    // settingsStore.path = ''
  }else if(n.path.includes('cxls')){
    document.querySelector(':root').style.setProperty('--base-width','calc(100% - 280px)');
    settingsStore.isShow = true
    settingsStore.routerName = 'cxls'
    // settingsStore.path = ''
  }else if(n.path.includes('wscf')){
    document.querySelector(':root').style.setProperty('--base-width','calc(100% - 280px)');
    settingsStore.isShow = true
    settingsStore.routerName = 'wscf'
    // settingsStore.path = ''
  }else if(n.path.includes('gj')){
    document.querySelector(':root').style.setProperty('--base-width','calc(100% - 280px)');
    settingsStore.isShow = true
    settingsStore.routerName = 'gj'
    // settingsStore.path = ''
  }
}

// const path2 = router.currentRoute.value.fullPath

// console.log(router.currentRoute.value.fullPath);
// watch(path2,()=>{
//   console.log(111);
//   settingsStore.routerName = ''
// })

onMounted(() => {
  window.addEventListener('resize', setVisibleNumber)
  window.addEventListener('resize', ()=>{
    // 获取当前屏幕的宽度
   screenWidth.value = window.innerWidth;
  });
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', setVisibleNumber)
  window.addEventListener('resize', ()=>{
    // 获取当前屏幕的宽度
   screenWidth.value = window.innerWidth;
  });
})

watch(()=>path.value,()=>{
  // router.push(path.value)
})

onMounted(() => {
  // setVisibleNumber()
})
</script>

<style lang="scss">


.textcolor{
  color: rgba(44, 78, 120, 1) !important;
}

.itemLight{
  // background-image: url('/src/assets/images/nav/背景2.png');
  // background-blend-mode: multiply;
  // background-size: cover;
  .el-sub-menu__title{
    border-bottom: none !important;
  }
  .el-menu-item:hover{
    background-color: rgba(0, 0, 0, 0.06) !important;
  }
  .el-sub-menu__title:hover{
    background-color: rgba(0, 0, 0, 0.06) !important;
  }
}
.noLight{
  // background-image: url('/src/assets/images/nav/背景.png');
  // background-blend-mode: multiply;
  // background-size: cover;
  .el-sub-menu__title{
    border-bottom: none !important;
  }
  .el-menu-item:hover{
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
  .el-sub-menu__title:hover{
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
}

.arrow{
  position: absolute;
  color: #93a6c2;
  right: 200px;
  z-index: 9;
}
.arrow:hover{
  cursor: pointer;
}

.el-menu-demo{
  width: 100%;
  height: 100%;
  border: none !important;
  transition: transform 0.3s ease-in-out;
  .el-menu-item{
    width: 80px;
    flex-shrink: 0;
  }
  .el-sub-menu{
    width: 80px;
    flex-shrink: 0;
  }
  .el-sub-menu__title .el-icon{
    display: none;
  }
  .el-sub-menu__title{
    padding: 0 !important;
  }
}


.topnav{
  width: calc(100% - 653px);
  height: 70px;
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 99;
  .item{
    width: 80px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    line-height: normal !important;
    img{
      width: 32px;
      height: 32px;
    }
    div{
      font-size: 14px;
      color: rgba(255,255,255,0.8);
    }
  }
  // .item:hover{
  //   border-radius: 5px;
  //   cursor: pointer;
  //   background-color: rgba(255, 255, 255, 0.06);
  // }
}

.click{
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.06);
}
</style>
